<template>
    <div class="box">
        <div class="header">首页</div>
        <div class="content">
            <!-- 1.商品轮播图 -->
            <van-swipe 
                class="my-swipe" 
                :autoplay="3000" 
                indicator-color="white"
            >
                <van-swipe-item
                    v-for="item in bannerList"
                    :key="item.bannerid"
                >
                    <van-image :src="item.img" />
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>

<script setup lang="ts">
import { getBannerList } from "@/api/home"
import { onMounted, ref } from "vue";
import type { Ref } from 'vue'

interface IBannerList {
    alt: string;
    bannerid: string;
    flag: boolean;
    img: string;
    link: string;
}

const bannerList: Ref<IBannerList[]> = ref([])

onMounted(async () => {
    const { data } = await getBannerList()
    bannerList.value = data.data
    // console.log(bannerList.value);

})
</script>

<style>
/* .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
} */
</style>